<template>
  <editor :id="realId" v-model="content" :init="init"/>
</template>
<script>
  import tinymce from 'tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/icons/default/icons'
  import placeholder from '@comp/RichTextEditor/placeholder'
  import '@comp/RichTextEditor/wordlimit'
  placeholder(tinymce);
  let index=0;
  export default {
    name: 'RichTextEditor',
    components: {
      Editor
    },
    props: {
      id:{
        type: String,
        default: ""
      },
      value:{
        type: String,
        default: null
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      max: {
        type: [Number],
        default: null
      },
      height: {
        type: [Number, String],
        default: 400
      },
      width: {
        type: [Number, String],
        default: undefined
      }
    },
    computed: {
      content: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);    // 触发
        }
      }
    },
    data() {
      return {
        realId: this.id || 'tinymce' + index++,
        init: {
          language_url: './zh_CN.js', // 语言包位置，因为放在public下所以可以省略public
          selector: '#tinymce', //tinymce的id
          language: 'zh_CN', //语言类型
          skin_url: './skins/ui/oxide',
          placeholder: '',
          max:200,
          height: this.height, //编辑器高度
          width: this.width,
          forced_root_block: '',
          browser_spellcheck: true, // 拼写检查
          // elementpath: false, //禁用编辑器底部的状态栏
          // statusbar: false, // 隐藏编辑器底部的状态栏
          paste_data_images: true, // 允许粘贴图像
          // menubar: false, //最顶部文字信息
          plugins: 'image link code table lists wordcount wordlimit placeholder',
          branding: false, //是否禁用“Powered by TinyMCE”
          toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', //工具栏
          fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
          wordlimit: {
            max: this.max, // 最多可以输入多少字
            spaces: true, // 是否含空格
            isInput: false, // 是否在超出后还可以输入
            maxMessage: "最多输入"+this.max+"字！",
            changeMaxCallback: () => {
              if (!this.max) {
                return;
              }
              this.$message.error("最多输入"+this.max+"字!");
            }, // 自定义的回调方法
          }
        },
      }
    },
    created () {
    },
    mounted() {
      tinymce.init({});
    },
  }
</script>